<template>
  <div class="card art-custom-card">
    <div class="card-header">
      <div class="title">
        <h4 class="box-title">{{ props.type === 1 ? '学员班型概况' : '会员VIP概况' }}</h4>
        <p class="subtitle">销售额<span class="text-success">{{ props.type === 1
          ? salesVolume.toFixed(2) : salesVolume }}</span></p>
      </div>
      <el-radio-group v-model="radioType" @change="yearsChange">
        <el-radio-button value="1" label="本月"></el-radio-button>
        <el-radio-button value="2" label="上月"></el-radio-button>
        <el-radio-button value="3" label="今年"></el-radio-button>
      </el-radio-group>
    </div>
    <art-table class="table" :data="tableData" :pagination="false" size="large" :border="false" :stripe="false"
      :show-header-background="false" :height="500">
      <template #default>
        <el-table-column :label="props.type === 1 ? '班型信息' : 'VIP名称'" prop="name" width="150px" align="center" />
        <el-table-column label="售价" prop="price" align="center" />
        <el-table-column :label="props.type === 1 ? '销量' : '开通数量'" prop="saleNum" align="center" />
        <el-table-column label="销售额" width="240" prop="saleAmount" align="center" />
      </template>
    </art-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue-demi'
import { homeVIPSales, homeStudentClass } from '@/api/homeApi'

const props = defineProps({
  type: {
    type: Number,
    default: ''
  },
})

const salesVolume = ref(0)

const radioType = ref('1')

const tableData = ref([])

const yearsChange = (e: any) => {
  radioType.value = e
  if (props.type === 1) {
    getStudentClassData()
  } else {
    getVIPSalesData()
  }
}

const getStudentClassData = async () => {
  const res = await homeStudentClass({ type: radioType.value })
  if (res.code === '00000') {
    tableData.value = res.data.map((e: any) => {
      return {
        ...e,
        price: e.price,
        saleAmount: e.saleAmount
      }
    })
    salesVolume.value = res.data.reduce((total: any, item: any) => total + item.saleAmount, 0);
  }
}

const getVIPSalesData = async () => {
  const res = await homeVIPSales({ type: radioType.value })
  if (res.code === '00000') {
    tableData.value = res.data.map((e: any) => {
      return {
        ...e,
        price: e.price,
        saleAmount: e.saleAmount
      }
    })
    salesVolume.value = res.data.reduce((total: any, item: any) => total + Number(item.saleNum), 0);
  }
}
onMounted(() => {
  if (props.type === 1) {
    getStudentClassData()
  } else {
    getVIPSalesData()
  }
})
</script>

<style lang="scss">
.card {

  // 进度动画
  .el-progress-bar__inner {
    transition: all 1s !important;
  }

  .el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: var(--el-color-primary) !important;
    background: transparent !important;
  }
}
</style>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 510px;
  overflow: hidden;

  .card-header {
    padding-left: 25px !important;
  }

  :deep(.el-table__body tr:last-child td) {
    border-bottom: none !important;
  }

  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }

  .user-name {
    margin-left: 10px;
  }
}
</style>
